<template>
  <div>
    <transition
      @befor-enter="beforeAnimate"
      @enter="animate"
      @after-enter="afterAnimate"
    >
      <div class="ball" v-if="ballFlag" ref="ball"></div>
    </transition>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swipe :pics="pics" :isfull="false"></swipe>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">
        Apple MacBook Air 13.3 八核M1芯片(7核图形处理器) 8G 256G SSD 深空灰
        笔记本电脑 MGN63CH/A
      </div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            市场价：<span class="market_price">￥998</span> 销售价：<span
              class="shop_price"
              >￥598</span
            >
          </p>
          <div>
            购买数量：<numbox
              :max="stock_quantity"
              @getCount="getCount"
            ></numbox>
          </div>
          <p class="buy">
            <mt-button type="primary">立即购买</mt-button>
            <mt-button type="danger" @click="addCart">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：NO123456</p>
          <p>库存情况：{{ stock_quantity }}件</p>
          <p>上架时间：2022-03-02 14:25:16</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain>图文介绍</mt-button>
        <mt-button type="danger" size="large" plain>商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import swipe from "./Swipe.vue";
import numbox from "./NumBox.vue";
export default {
  data() {
    return {
      pics: [
        { id: 1, url: "../../static/imgs/cbd.jpg" },
        { id: 2, url: "../../static/imgs/muwu.jpg" },
      ],
      ballFlag: false,
      stock_quantity: null,
      goods_num: 1,
    };
  },
  mounted() {
    setTimeout(() => {
      this.stock_quantity = 60;
    });
  },
  components: {
    swipe,
    numbox,
  },
  methods: {
    addCart() {
      this.ballFlag = !this.ballFlag;
      let id = 1 + Math.floor(Math.random() * (5 - 1 + 1));

      let goodsinfo = {
        id,
        count: this.goods_num,
        price: 1999,
        selected: true,
      };

      let flag = this.$store.state.car.some((item) => {
        if (item.id === goodsinfo.id) {
          item.count += goodsinfo.count;
          return true;
        } else {
          return false;
        }
      });
      if (!flag) {
        this.$store.commit("addCar", goodsinfo);
      }
    },
    beforeAnimate(el) {
      el.style.transform = "translate(0,0)";
    },
    animate(el, done) {
      el.offsetWidth;
      let badge = document.getElementById("badge");
      let badgePos = badge.getBoundingClientRect();

      let ballPos = this.$refs.ball.getBoundingClientRect();

      let x = badgePos.left - ballPos.left;
      let y = badgePos.top - ballPos.top;

      el.style.transform = `translate(${x}px ,${y}px)`;
      el.style.transition = "all .5s cubic-bezier(.34,-0.22,1,.38)";
      done();
    },
    afterAnimate(el) {
      this.ballFlag = !this.ballFlag;
    },
    getCount(num) {
      this.goods_num = num;
    },
  },
};
</script>

<style scoped>
.market_price {
  text-decoration: line-through;
}
.shop_price {
  color: red;
  font-weight: bold;
  font-size: 16px;
}
.buy {
  margin-top: 10px;
}
.mui-card-footer {
  display: block;
}
.mui-card-footer button {
  margin: 15px 0;
}
.ball {
  position: absolute;
  top: 428px;
  left: 152px;
  z-index: 99;
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
}
</style>